<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/2/25
  Time: 12:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>品牌管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>
    <!--添加form表单-->
    <form class="layui-form" id="addForm" lay-filter="addFormFilter" style="display: none;padding: 15px 15px 5px 5px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">品牌名称</label>
            <div class="layui-input-block">
                <input type="hidden" name="logo">
                <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">品牌首字母</label>
            <div class="layui-input-block">
                <input type="text" name="first_letter" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">品牌LOGO</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="addLogo">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">品牌故事</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" name="brand_story" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="text" name="sort" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否显示</label>
            <div class="layui-input-block">
                <input type="radio" name="show_status" value="1" title="是" checked>
                <input type="radio" name="show_status" value="0" title="不是">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">品牌制造</label>
            <div class="layui-input-block">
                <input type="radio" name="factory_status" value="1" title="是" checked>
                <input type="radio" name="factory_status" value="0" title="不是">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addFilter">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>
    <!--修改form表单-->
    <form class="layui-form" id="updateForm" lay-filter="updateFormFilter" style="display: none;padding: 15px 15px 5px 5px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">品牌名称</label>
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <input type="hidden" name="logo">
                <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">品牌首字母</label>
            <div class="layui-input-block">
                <input type="text" name="first_letter" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">品牌LOGO</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="updateLogo">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">品牌故事</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" name="brand_story" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="text" name="sort" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否显示</label>
            <div class="layui-input-block">
                <input type="radio" name="show_status" value="1" title="是" checked>
                <input type="radio" name="show_status" value="0" title="不是">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">品牌制造</label>
            <div class="layui-input-block">
                <input type="radio" name="factory_status" value="1" title="是" checked>
                <input type="radio" name="factory_status" value="0" title="不是">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="updateFilter">修改</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>
    <!--添加按钮-->
    <button class="layui-btn" id="add">添加</button>
    <!--搜索框-->
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="name" id="search" placeholder="请填写品牌名称"/>
        </div>
    </div>
    <button class="layui-btn layui-btn-sm" id="searchBtn">搜索</button>
    <!--展示表格-->
    <table id="myTable" lay-filter="tableFilter"></table>
    <!--toolbar工具栏-->
    <script type="text/html" id="bar1">
        <a class="layui-btn layui-btn-xs" lay-event="#">查看下级</a>
        <a class="layui-btn layui-btn-xs" lay-event="#">转移商品</a>
    </script>
    <script type="text/html" id="bar2">
        <a class="layui-btn layui-btn-xs" lay-event="upd">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
    </script>
    <!--layui代码-->
    <script>
        layui.use(['table','form','upload','layer'],function () {
            var table = layui.table;
            var layer = layui.layer;
            var upload = layui.upload;
            var form = layui.form;
            var $ = layui.$;
            //渲染表格
            var tableIns = table.render({
                elem:'#myTable',
                url:'brand/show',
                page:true,
                limit:3,
                limits:[3,4,5],
                cols:[[
                    {field:'id',title:'编号',width:80, sort: true},
                    {field:'name',title:'品牌名称',width:80, sort: true},
                    {field:'first_letter',title:'品牌首字母',width:80, sort: true},
                    {field:'sort',title:'排序',width:80, sort: true},
                    {field:'factory_status',title:'品牌制造商',templet:function (d) {
                            if(d.factory_status==0){
                                return '不是制造商'
                            }else{
                                return '是制造商'
                            }
                        }},
                    {field:'show_status',title:'是否显示',templet:function (d) {
                            if(d.show_status==0){
                                return '不显示'
                            }else{
                                return '显示'
                            }
                        }},
                    {title:'相关',templet:function (d) {
                            return '商品:'+d.product_count+',评价:'+d.product_comment_count
                        }},
                    {title:'设置',toolbar:'#bar1'},
                    {title:'操作',toolbar:'#bar2'},
                ]]
            })
            //2、按品牌名称搜索
            $('#searchBtn').click(function () {
                tableIns.reload({
                    where:{
                        name:$('#search').val()
                    },page: {
                        curr:1
                    }
                })
            })
            //3、添加操作
            //给添加按钮绑定点击事件
            $('#add').click(function () {
                layer.open({
                    type:1,
                    title:'添加页面',
                    area:'500px',
                    content:$('#addForm')
                })
            })
            //加载文件上传upload组件
            upload.render({
                elem: '#addLogo',
                url: 'brand/upload',
                done:function (result) {
                    form.val('addFormFilter',{
                        logo:result.newFileName
                    })
                }
            })
            //添加表单开始提交
            form.on('submit(addFilter)',function () {
                $.ajax({
                    url:'brand/add',
                    data:$('#addForm').serialize(),
                    success:function (result) {
                        if(result.flag){
                            layer.msg('添加成功');
                            layer.closeAll();
                            $('#addForm')[0].reset();
                            tableIns.reload()
                        }else{
                            layer.msg('添加失败')
                        }
                    }
                })
                return false;//阻止表单自动提交
            })
            //4、监听 行工具事件  执行删除或修改操作
            table.on('tool(tableFilter)',function (obj) {
                if(obj.event=='upd'){
                    //首先，弹出修改页面
                    layer.open({
                        type:1,
                        title:'修改页面',
                        area:'500px',
                        content:$('#updateForm')
                    })
                    //然后，回显修改页面内容
                    $.ajax({
                        url:'brand/getOne',
                        data:'id='+obj.data.id,
                        success:function (result) {
                            form.val('updateFormFilter',{
                                id:result.id,
                                name:result.name,
                                first_letter:result.first_letter,
                                sort:result.sort,
                                logo:result.logo,
                                show_status:result.show_status,
                                factory_status:result.factory_status,
                                brand_story:result.brand_story
                            })
                        }
                    })
                    //接着加载图片文件上传组件
                    upload.render({
                        elem:'#updateLogo',
                        url:'brand/upload',
                        done:function (result) {
                            form.val('updateFormFilter',{
                                logo:result.newFileName
                            })
                        }
                    })
                    //提交修改表单
                    form.on('submit(updateFilter)',function () {
                        $.ajax({
                            url:'brand/update',
                            data:$('#updateForm').serialize(),
                            success:function (result) {
                                if(result.flag){
                                    layer.msg('修改成功');
                                    layer.closeAll();
                                    tableIns.reload()
                                }else{
                                    layer.msg('修改失败')
                                }
                            }
                        })
                        return false;
                    })

                }else if(obj.event=='del'){
                    layer.confirm('确定删除该项吗？',function (index) {
                        $.ajax({
                            url:'brand/delete',
                            data:'id='+obj.data.id,
                            success:function (result) {
                                if(result.flag){
                                    layer.msg('删除成功');
                                    tableIns.reload()
                                }else{
                                    layer.msg('删除失败')
                                }
                            }
                        })
                        layer.close(index);
                    })
                }
            })
        })
    </script>


</body>
</html>
